.chatList {
	.sticky {
		background: linear-gradient(180deg, #fff6ea 0%, rgba(243, 243, 243, 0) 100%);

		.title {
			border-bottom: 1px solid transparent;
			display: flex;
			justify-content: center;
			padding: 15px;
			/*#ifdef APP-PLUS*/
			padding-top: calc(15px + var(--status-bar-height));

			/*#endif*/
			>view:nth-child(1) {
				position: absolute;
				left: 15px;

				i {
					background: url(@/static/image/32.png) no-repeat;
					background-size: 100% 100%;
					width: 27px;
					height: 27px;
					display: block;
				}
			}

			>view:nth-child(2) {
				text-align: center;
				font-weight: 600;
				font-size: 18px;
				color: #000000;
			}

			>view:nth-child(3) {
				display: flex;
				align-items: center;
				position: absolute;
				right: 15px;

				>view {
					padding-left: 20px;
					position: relative;

					>image {
						width: 27px;
						height: 27px;
					}

					.dot {
						position: absolute;
						top: -4px;
						right: -15px;
					}
				}

				.triangle-up {
					width: 125px;
					background: rgba(0, 0, 0, 0.88);
					border-radius: 10px;
					position: absolute;
					right: -8px;
					top: 36px;
					padding: 15px 0;

					&::before {
						content: '';
						display: block;
						background: url(@/static/image/9.png) no-repeat;
						background-size: 100% 100%;
						width: 10px;
						height: 6px;
						position: absolute;
						right: 16px;
						top: -6px;
					}

					>view {
						font-size: 15px;
						color: #ffffff;
						padding-left: 45px;
						margin-bottom: 24px;
					}

					>view:nth-child(1) {
						background: url(@/static/image/6.png) no-repeat left 10px center;
						background-size: 22px 22px;
					}

					>view:nth-child(2) {
						background: url(@/static/image/7.png) no-repeat left 10px center;
						background-size: 22px 22px;
					}

					>view:nth-child(3) {
						background: url(@/static/image/8.png) no-repeat left 10px center;
						background-size: 22px 22px;
					}

					>view:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		.titleBg {
			background: #ffffff;
			border-bottom: 1px solid #f3f3f3;
		}
	}

	.com {
		padding: 0 10px 1px;

		.msgList {
			border-radius: 5px;
			margin: 20px 0;
			overflow: hidden;
			background: #ffffff;
			min-height: 80vh;

			.msgItem {
				display: flex;
				justify-content: space-between;
				background: #ffffff;

				padding: 12px 10px;
				border-bottom: 1px solid #f3f3f3;

				>view:nth-child(1) {
					display: flex;
					width: 80%;

					>view {
						>image {
							width: 50px;
							height: 50px;
						}
					}

					.name {
						width: 75%;
						margin-left: 10px;

						>view:nth-child(1) {
							font-size: 16px;
							color: #000000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 22px;

						}

						>view:nth-child(2) {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.5);
							margin-top: 4px;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							height: 20px;

							>view {
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.unread {
								color: #e1862b;
							}

						}
					}
				}

				>view:nth-child(2) {
					margin-top: 5px;

					>view:nth-child(1) {
						font-size: 13px;
						color: rgba(0, 0, 0, 0.5);
					}

					>view:nth-child(2) {
						margin-top: 8px;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						image {
							width: 18px;
							height: 18px;
						}

						.dot {
							margin-left: 8px;
						}
					}
				}
			}

			.msgItem:active {
				opacity: 0.8;
				background: #eee;
			}

			>view:last-child {
				border-bottom: 0;
			}
		}
	}
}